page {
  background-color: #23262D;

  .cinema {

    // 地址 + 标题 + 搜索
    .header {
      width: calc(100% - 80rpx);
      height: 88rpx;
      position: fixed;
      left: 0;
      top: 0;
      padding: 0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #33363D;
      z-index: 999;

      .city {
        opacity: 0.78;
        font-size: 28rpx;
        color: #DFDFDF;
        display: flex;
        align-items: center;

        .text {
          margin-right: 10rpx;
        }

        .icon {
          width: 27rpx;
          height: 14rpx;
        }
      }

      .title {
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .img {
        width: 27rpx;
        height: 27rpx;
        vertical-align: top;
      }
    }

    // 我的地址
    .myAddress {
      width: calc(100% - 80rpx);
      height: 60rpx;
      background: #2C2F36;
      margin-top: 112rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      opacity: 0.59;
      font-size: 24rpx;
      color: #FFFFFF;

      .img {
        width: 26rpx;
        height: 32rpx;
        vertical-align: top;
      }

      .text {
        margin: 0 20rpx 0 23rpx;
      }
    }

    // 影院
    .list {
      margin: 0 40rpx 200rpx;

      .item {
        background: #33363D;
        border-radius: 12rpx;
        margin-top: 30rpx;
        padding: 18rpx 22rpx;
        display: flex;
        justify-content: space-between;

        .left {
          flex-grow: 1;
          width: 50%;

          .name {
            font-size: 28rpx;
            color: #fff;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .cinemaAddress {
            opacity: 0.76;
            font-size: 24rpx;
            color: #FFFFFF;
            margin-top: 6rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .info {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #DFDFDF;
            margin-top: 20rpx;

            .hui {
              border-radius: 5rpx;
              background-image: linear-gradient(135deg, #EB6E75 0%, #F7A653 100%);
            }

            .cu {
              border-radius: 5rpx;
              background-image: linear-gradient(135deg, #B0469D 0%, #6148AA 100%);
            }

            .ka {
              border-radius: 5rpx;
              background-image: linear-gradient(135deg, #322495 0%, #3138AC 100%);
            }

            .desc {
              opacity: 0.59;
              color: #FFFFFF;
              margin-left: 18rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }

        .right {
          width: 25%;

          .price {
            display: flex;
            justify-content: flex-end;

            .num {
              font-size: 28rpx;
              color: #FBC34A;
            }

            .text {
              font-size: 24rpx;
              color: #ffffff;
              opacity: 0.76;
              margin-left: 10rpx;
              margin-top: 6rpx;
            }
          }

          .distance {
            opacity: 0.59;
            font-size: 24rpx;
            color: #FFFFFF;
            text-align: right;
          }
        }
      }
    }
  }
}